<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>:: NOMBRE DEL SISTEMA ::</title>

<link rel="stylesheet" type="text/css" href="css/estilos.css">
<link rel="stylesheet" type="text/css" href="css/estilosLightbox.css">
<link rel="stylesheet" type="text/css" href="css/estilosSqueezeBox.css">
<link rel="stylesheet" type="text/css" href="css/estilosCalendario.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/estilosTooltip.css" media="all">
<link rel="stylesheet" type="text/css" href="css/estilosEditableTexto.css">

<script type="text/javascript" src="js/mootools-1.2.4-core-yc.js"></script>
<script type="text/javascript" src="js/mootools-1.2.4.2-more.js"></script>
<!-- Javascript para efecto accordeon-->

<script type="text/javascript">
//<![CDATA[
    var Site = {
        start: function(){
            Site.accordion();
        },
        
        accordion: function(){
            var list = $$('#men_ContenedorItem li div.oculto'); /* Indicas cual es el elemento que va a estar oculto */
			/*var headings = $$('#men_ContenedorItem li a#padre');*/ /* Indicas que elemento se comporta como enlace */
			var headings = $$('#men_ContenedorItem li a.notcurrent');
            var collapsibles = new Array();
            
            headings.each( function(heading, i) {

                var collapsible = new Fx.Slide(list[i], { 
                    duration: 500, 
                    transition: Fx.Transitions.quadIn
                });
                
                collapsibles[i] = collapsible;
                
                heading.onclick = function(){
				
					var enlacePadre = heading.getProperty('class');
                    if(enlacePadre){

						if(enlacePadre=='notcurrent'){
							heading.setProperties({'class': 'current'});
						}else{
							heading.setProperties({'class': 'notcurrent'});
						}
                    }

                    collapsible.toggle();
                    
                    return false;
                }
                
                collapsible.hide();
                
            }); /* Fin del each que es igual que el foreach */
        } /* Fin de la funcion accordion */
    }; /* Fin de la funcion Site */
    window.addEvent('domready', Site.start);
//]]>	
</script>

</head>

<body>

  <div id="cuerpo">
		<div id="menu">
        	<h1>MENÚ</h1>
            <ul id="men_ContenedorItem">
                <li>
                    <a class="notcurrent"><span></span> MANTENIMIENTO</a>
                    <div class="oculto">
                        <ul class="men_SubContItem">
                            <li><a class="otroClase" href="#" >Clientes</a></li>
                            <li><a class="otroClase" href="#" >Ubicaciones</a></li>
                            <li><a class="otroClase" href="#" >Vehiculo</a></li>
                            <li><a class="otroClase" href="#" >Hidrocarburo</a></li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a class="notcurrent"><span></span> MOVIMIENTOS</a>
                    <div class="oculto">
                        <ul class="men_SubContItem">
                        	<li><a href="mantDespacho.jsp" target="panel" class="otroClase">Despacho</a></li>
                            <li><a href="mantRemitoTraslado.jsp" target="panel" class="otroClase">Remito Traslado </a></li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a class="notcurrent"><span></span> CONSULTAS</a>
                    <div class="oculto">
                        <ul class="men_SubContItem">
                            <li><a class="otroClase" target="panel" href="consultaRemitoTraslado.jsp">Remito Traslado</a></li>
                            <li><a class="otroClase" target="panel" href="listaRemitoTraslado.jsp">Despachos</a></li>
                        </ul>
                    </div>
                </li>
                <li></li>
                <li><div class="oculto"></div>
              </li>
          </ul>  
		</div>

</div>
</body>
</html>